<template>
  <table class="table-striped">
    <!-- 表头 -->
    <thead class="thead-dark">
      <tr>
        <th v-for="(header, index) in headers" :key="index" scope="col">{{ header }}</th>
      </tr>
    </thead>
    <!-- 可拖动表体 -->
    <draggable v-model="list" tag="tbody" item-key="name">
      <template #item="{ element }">
        <tr>
          <td scope="row">{{ element.id }}</td>
          <td>{{ element.name }}</td>
          <td>{{ element.sport }}</td>
        </tr>
      </template>
    </draggable>
  </table>
</template>

<script lang="ts">
export default {
  name: 'draggable-table'
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
import draggable from 'vuedraggable'

const props = defineProps<{
  headers: string | number[]
  //   datas:Record<string,string|number>[]
}>()

const list = ref([
  { id: 1, name: 'Abby', sport: 'basket' },
  { id: 2, name: 'Brooke', sport: 'foot' },
  { id: 3, name: 'Courtenay', sport: 'volley' },
  { id: 4, name: 'David', sport: 'rugby' }
])
</script>

<style lang="scss" scoped>
.buttons {
  margin-top: 35px;
}

table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;
  border-collapse: separate;
  text-indent: initial;
  border-spacing: 2px;
  .thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
  }
  th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-center;
    text-align: inherit;
    text-align: -webkit-match-parent;
  }
  td,
  th {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
  }
  thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
  }
}
</style>
